<nav id="page" style="display: none">
    <ul class="pagination">
        <li id="p_first"><a href="#">首页</a></li>
        <li id="p_pre"><a href="#">上一页</a></li>
        <li id="p_next"><a href="#">下一页</a></li>
        <li id="p_last"><a href="#">末页</a></li>
    </ul>
</nav>
<script>
$(function() {
    var page = {
        'total_page': {{ page.total_page }},
        'total': {{ page.total }},
        'page': {{ page.page }},
        'size': {{ page.size }},
    }
    var offset = 3
    var params = window.location.search
    params = params.replace('?', '')
    params = params.split('&')
    var new_params = []
    for (var i = params.length - 1; i >= 0; i--) {
        if (params[i].indexOf('p=') == -1) new_params.unshift(params[i])
    }
    var url = '?' + new_params.join('&')
    $('#p_first a').attr('href', url + '&p=1')
    $('#p_last a').attr('href', url + '&p=' + page.total_page)

    pre_page = page.page == 1 ? 1 : page.page - 1
    next_page = page.page == page.total_page ? page.total_page : page.page + 1
    $('#p_pre a').attr('href', url + '&p=' + pre_page)
    $('#p_next a').attr('href', url + '&p=' + next_page)

    var page_html = ''
    for (var i = offset; i >= 1; i--) {
        if (page.page - i <= 0 ) continue
        page_html += '<li><a href="' + url + '&p=' + (page.page - i) + '">' + (page.page - i) + '</a></li>'
    }
    page_html += '<li class="active"><a href="#">' + page.page + '</a></li>'
    for (var i = 1; i <= offset; i++) {
        if (page.page + i > page.total_page ) continue
        page_html += '<li><a href="' + url + '&p=' + (page.page + i) + '">' + (page.page + i) + '</a></li>'
    }

    $('#p_pre').after(page_html)
    if (page.total_page > 1)
        $('#page').show()

})
</script>
